<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据可视化</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <div class="row1" style="width: 400px">
        <span>各地区景区销售情况:(每季度/万元)</span>
        <div ref="one" style="width: 300px; height: 300px"></div>
      </div>
      <div class="row2" style="width: 600px;">
        <span>热门景区进三年的客流量:(每年/万人)</span>
        <div ref="two" style="width: 600px; height: 400px"></div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div ref="three" style="width: 100%; height: 300px"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  mounted() {
    this.charOne(), this.charTwo(), this.charTree()
  },
  methods: {
    charOne() {
      const myChart = echarts.init(this.$refs.one)

      myChart.setOption({
        // title: {
        //   text: '地区销售情况',
        // },
        tooltip: {},
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              // 数据数组，name 为数据项名称，value 为数据项值
              { value: 235, name: '华北' },
              { value: 274, name: '西南' },
              { value: 310, name: '东北' },
              { value: 335, name: '西北' },
              { value: 400, name: '华南' },
            ],
          },
        ],
      })
    },
    charTwo() {
      const myChart = echarts.init(this.$refs.two)
      myChart.setOption({
        legend: {},
        tooltip: {},
        dataset: {
          // 提供一份数据。
          source: [
            ['product', '2019', '2020', '2021'],
            ['故宫', 43.3, 85.8, 93.7],
            ['八达岭', 83.1, 73.4, 55.1],
            ['长白山', 86.4, 65.2, 82.5],
            ['九寨沟', 72.4, 53.9, 39.1],
          ],
        },
        // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
        xAxis: { type: 'category' },
        // 声明一个 Y 轴，数值轴。
        yAxis: {},
        // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
        series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }],
      })
    },
    charTree() {
      const myChart = echarts.init(this.$refs.three)
      myChart.setOption({
        title: {
          text: '各景区线上系统访问量:(每天/万人)',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['手机app', 'PC端', '第三方渠道'],
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '手机app',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: 'PC端',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: '第三方渠道',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410],
          },
        ],
      })
    },
  },
}
</script>

<style>
.row1 {
  float: left;
  /* width: 400px; */
}
.row2 {
  margin-left: 50px;
  float: left;
  /* width: 600px; */
}
.box-card {
  margin-top: 20px;
}
</style>
